<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <!-- 
      v-for:
        * 我们可以用 v-for 指令基于一个数据来渲染一个列表。
        * v-for 指令需要使用 item,index in data 形式的特殊语法，其中 items 是源数据数组，而 index 遍历的数据下标，data是被遍历的数据
        * v-for可以遍历的数据类型
          - 数组，item就是数组的值，index就是下标
          - 对象，item就是value，index就是key
          - 字符串，item就是每个值，index就是下标
          - 数字,item就是从1开始的值，inde就是下标
      -->
    <div id="app">
      <div>
        <h2>遍历对象</h2>
        <p v-for="value,key in person">{{value}}--{{key}}</p>
      </div>
      <div>
        <h2>遍历字符串</h2>
        <p v-for="item,index in str">{{item}}---{{index}}</p>
      </div>
      <div>
        <h2>遍历数字</h2>
        <button v-for="item,index in count">{{item}}--{{index}}</button>
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 10,
            person: {
              name: "张三",
              age: 18,
              sex: "男",
            },
            str: "abcdefg",
          };
        },
      });
    </script>
  </body>
</html>
